<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="static/styles/reset.css" />
    <link rel="stylesheet" type="text/css" href="static/styles/common.css" />
    <link rel="stylesheet" type="text/css" href="static/styles/leave.css" />
    <script src="static/scripts/rem.js" type="text/javascript" charset="utf-8"></script>
    <script src="static/scripts/vue.min.js" type="text/javascript" charset="utf-8"></script>
    <title>请假审批</title>
</head>

<body>
    <div class="body body_gray" id="app">
        <div id="header" class="fixed blue">
        	<a href="javascript:history.go(-1);" class="header_back">
        		<img src="static/images/nav_back.png"/>
        	</a>
            <h1 class="title">请假审批</h1>
            <a href="leave_apply.html" class="header_btn_right">请假</a>
        </div>
        <div class="page_body">
            <div class="tab">
                <a class="tab_item col_6" :class="{active:status===0}" href="javascript:;" @click="changeStatus(0)">待审批</a>
                <a class="tab_item col_6" :class="{active:status===1}" href="javascript:;" @click="changeStatus(1)">已审批</a>
            </div>
            <div class="leave_list" v-if="status===0">
                <div class="item">
                    <div class="status_head">
                        <span class="status_mark">
								<img class="vmd" src="static/images/icon_weichuli.png"/>
								未处理
							</span>
                        <span class="agree_word">
								【法斯机构主管审批】木兰查拓已同意
							</span>
                    </div>

                    <div class="leave_body clearfix">
                        <div class="left_user_avatar">
                            <div class="avatar">
                                <img src="static/images/list_image_touxiang.png" />
                            </div>
                        </div>
                        <div class="right_user_info">
                            <div class="user_name">
                                吐尔洪·铁兰迪
                                <span class="dep">-业务部</span>
                            </div>
                            <div class="cell">
                                <span class="cell_title">请假时间</span>
                                <span class="cell_value">2017.09.16-2017.09-17</span>
                            </div>
                            <div class="cell">
                                <span class="cell_title">请假时长</span>
                                <span class="cell_value">1天</span>
                            </div>
                            <div class="cell">
                                <span class="cell_title">请假事由</span>
                                <span class="cell_value">世界那么大我想去看看</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="status_head">
                        <span class="status_mark">
								<img class="vmd" src="static/images/icon_weichuli.png"/>
								未处理
							</span>
                        <span class="agree_word">
								【法斯机构主管审批】木兰查拓已同意
							</span>
                    </div>

                    <div class="leave_body clearfix">
                        <div class="left_user_avatar">
                            <div class="avatar">
                                <img src="static/images/list_image_touxiang.png" />
                            </div>
                        </div>
                        <div class="right_user_info">
                            <div class="user_name">
                                吐尔洪·铁兰迪
                                <span class="dep">-业务部</span>
                            </div>
                            <div class="cell">
                                <span class="cell_title">请假时间</span>
                                <span class="cell_value">2017.09.16-2017.09-17</span>
                            </div>
                            <div class="cell">
                                <span class="cell_title">请假时长</span>
                                <span class="cell_value">1天</span>
                            </div>
                            <div class="cell">
                                <span class="cell_title">请假事由</span>
                                <span class="cell_value">世界那么大我想去看看</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="leave_list" v-if="status===1">
                <div class="item">
                    <div class="status_head">
                        <span class="status_mark ysp">
								<img class="vmd" src="static/images/icon_yishenpi.png"/>
								已审批
							</span>
                        <span class="agree_word">
								【法斯机构主管审批】木兰查拓已同意
							</span>
                    </div>

                    <div class="leave_body clearfix">
                        <div class="left_user_avatar">
                            <div class="avatar">
                                <img src="static/images/list_image_touxiang.png" />
                            </div>
                        </div>
                        <div class="right_user_info">
                            <div class="user_name">
                                吐尔洪·铁兰迪
                                <span class="dep">-业务部</span>
                            </div>
                            <div class="cell">
                                <span class="cell_title">请假时间</span>
                                <span class="cell_value">2017.09.16-2017.09-17</span>
                            </div>
                            <div class="cell">
                                <span class="cell_title">请假时长</span>
                                <span class="cell_value">1天</span>
                            </div>
                            <div class="cell">
                                <span class="cell_title">请假事由</span>
                                <span class="cell_value">世界那么大我想去看看</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="status_head">
                        <span class="status_mark ysp">
								<img class="vmd" src="static/images/icon_yishenpi.png"/>
								已审批
							</span>
                        <span class="agree_word">
								【法斯机构主管审批】木兰查拓已同意
							</span>
                    </div>

                    <div class="leave_body clearfix">
                        <div class="left_user_avatar">
                            <div class="avatar">
                                <img src="static/images/list_image_touxiang.png" />
                            </div>
                        </div>
                        <div class="right_user_info">
                            <div class="user_name">
                                吐尔洪·铁兰迪
                                <span class="dep">-业务部</span>
                            </div>
                            <div class="cell">
                                <span class="cell_title">请假时间</span>
                                <span class="cell_value">2017.09.16-2017.09-17</span>
                            </div>
                            <div class="cell">
                                <span class="cell_title">请假时长</span>
                                <span class="cell_value">1天</span>
                            </div>
                            <div class="cell">
                                <span class="cell_title">请假事由</span>
                                <span class="cell_value">世界那么大我想去看看</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>
	
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				status:0
			},
			methods:{
				changeStatus(value){
					this.status = value;
				}
			}
		})
	</script>
</body>

</html>